'use client'
import React from'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';

const Breadcrumb = ({ routes }) => {
    const pathname = usePathname();
    const breadcrumbItems: { label: any; href: string | null; }[] = [];
    routes.forEach((route: { key: string; label: any; }) => {
        if (pathname.startsWith(route.key)) {
            const segments = route.key.split('》');
            let currentPath = '';
            segments.forEach((segment, index) => {
                currentPath += `/${segment}`;
                const isLast = index === segments.length;
                const item = {
                    label: route.label,
                    href: isLast? null : currentPath
                };
                if (!breadcrumbItems.some((existingItem) => existingItem.href === item.href)) {
                    breadcrumbItems.push(item);
                }
            });
        }
    });
    
    return (
        <nav aria-label="breadcrumb">
            <ol className="flex items-center" style={{display: 'flex', listStyle: 'none',fontSize:"20px", padding: '0', margin: '0'}}>
                <li>
                    <Link href="/fff" className="text-blue-600 hover:text-blue-800">首页</Link>
                </li>
                {breadcrumbItems.map((item, index) => (
                    <React.Fragment key={index}>
                        <li className="text-gray-500">/</li>
                        {item.href? (
                            <Link href={"/" + location.href.split('/')[3]} className="text-blue-600 hover:text-blue-800">
                                {item.label}
                            </Link>
                        ) : (
                            <span>{item.label}</span>
                        )}
                    </React.Fragment>
                ))}
            </ol>
        </nav>
    );
};

export default Breadcrumb;